<script setup>
import { onMounted, reactive, ref, watch, nextTick } from 'vue';
const columns = [
    {
        title: '用户',
        dataIndex: 'id',
        align: 'center',
        fixed: 'left',
        width: 100,
    },
    {
        title: '端口',
        dataIndex: 'name',
        align: 'center',
        width: 100,
    },
    {
        title: 'ip',
        dataIndex: 'sex',
        align: 'center',
        width: 100,
    },
    {
        title: '时间',
        dataIndex: 'age',
        align: 'center',
        width: 100,
    },
    {
        title: '操作详情',
        dataIndex: 'age',
        align: 'center',
        width: 120,
    },
];
const loading = ref(false);
const tableRef = ref(null);
const tableHeight = ref(0);
const scrollSet = ref({ x: 'max-content' })
const dataSource = ref(null);
onMounted(() => {
    nextTick(() => {
        if (dataSource.value) {
            let box = tableRef.value;
            let top = box.children[0].getBoundingClientRect().top;
            tableHeight.value = window.innerHeight - top - 54 - 64 - 30;
            scrollSet.value.y = tableHeight
        }
    })
})
const pagination = reactive({
    pageSizeOptions: ['5', '10', '20', '50'],
    showSizeChanger: true,
    total: 10,
    showTotal: total => `共 ${total} 页`
})
</script>
<template>
    <div class="unit-managinginfo">
        <div ref="tableRef">
            <a-table :loading="loading" :columns="columns" :data-source="dataSource" rowKey="id" :pagination="pagination"
                :scroll="scrollSet">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'sex'">
                        <div class="">
                            {{ text === 1 ? '男' : '女' }}
                        </div>
                    </template>
                    <template v-else-if="column.dataIndex === 'operation'">
                        <div class="">
                            <!-- <a-button type="link" size="small">重新编辑</a-button>
                                <a-button type="link" size="small" danger>删除</a-button> -->
                            <a-button type="link" size="small" @click="operatingRecord(record)">操作记录</a-button>
                        </div>
                    </template>
                </template>
            </a-table>
        </div>

    </div>
</template>
<style lang='scss' scoped>
.unit-managinginfo {
    background: #fff;
    padding: 15px;
    height: 100%;
}
</style>